<style lang="scss" rel="stylesheet/scss">
    .info-detail {
        background: #fff;
        .isweb-top {
            margin-top: 45px;
        }
        .isweb-bottom{
            margin-bottom: 42px;
        }
        .about-user {
            border-top:2px solid #eee;
            border-bottom: 1px solid #eee;
            padding: 0.4rem;
            .row {
                display: flex;
                .p-t {
                    display: flex;
                    flex:0 0 80%;
                    p {
                        color: #555;
                        flex: 1;
                        line-height: 1.5rem;
                    }
                }
                .p-more {
                    flex: 1;
                    color: #999;
                    line-height: 1.5rem;
                    text-align: right;
                }
            }
            .user-img-list {
                margin: 0.5rem auto;
                width: 20.8rem;
                // height: 5.3rem;
                overflow: hidden;
                // display: grid;
                // grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
                // grid-template-rows: 2.6rem 2.6rem;
                img {
                    // width: 10.7%;
                    // border-radius: 50%;
                    // margin-right: 2%;
                    // margin-top: 0.2rem;
                    width: 2.4rem;
                    border-radius: 50%;
                    margin-right: 0.22rem;
                    margin-top: 0.2rem;
                    height: 2.4rem;
                    // margin: 0 5%;
                    &:nth-child(8n) {
                        margin-right: 0;
                    }
                }
            }
        }
        .div-share-tip {
            padding: 0.5rem;
            text-align: center;
            color: #333;
            p {
                line-height: 1.5rem;
            }
            .s-tip {
                color: #0093f9;
                border: 1px solid #0093f9;
                border-radius: 0.2rem;
                line-height: 1.8rem;
                padding: 0 0.6rem;
                .black-weight {
                    color: #222;
                    font-weight: 700;
                }
            }
        }
        .zhu-title {
            line-height: 2rem;
            height: 2rem;
            padding: 0 0.5rem;
            color: #333;
            border-top:4px solid #f5f5f5;
            p.z-txt {
                float: left;
                font-weight: 600;
            }
            p.z-more {
                color: #999;
                float: right;
            }
        }
        
        .news-list {
            padding: 0.5rem 0;
            clear: both;
        }
        .fixed-botton-btn {
            display: flex;
            line-height: 40px;
            border-top: 1px solid #f5f5f5;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background: #fff;
            z-index: 99;
            .item-btn {
                flex: 1;
                color: #333;
                text-align: center;
            }
        }
        .share-arrow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.7);
            z-index: 100;
            img {
                width: 100vw;
                margin-top: 1rem;
            }
        }
    }
</style>
<template>
    <div class="info-detail">
        <jheader title="生活服务" v-if="!isapp"></jheader>
        <j-news-content :content="info" :class="{'isweb-top':!isapp}"></j-news-content>
        <div class="about-user">
            <div class="row">
                <div class="font-normal p-t">
                    <p>阅读得亿币{{info.share_info_browse_count || 0}}人 分享得亿币{{info.sharelogs_count || 0}}人</p>
                </div>
                <p v-if="info.sharelogs_data && info.share_info_browse_count > 16" @click="txmore(info.sharelogs_more_url)" class="font-s-small p-more">查看更多 ></p>
            </div>
            <div class="user-img-list" v-if="info.sharelogs_data && info.sharelogs_data.length > 0">
                <img v-for="item in info.sharelogs_data" :key="item.id" :src="item.share_member_avatar" alt="">
            </div>
        </div>
        <div class="font-normal div-share-tip">
            <p>分享赚钱,提现秒到</p>
            <p>1、分享信息到朋友圈，好友阅读+100亿币</p>
            <p>2、好友再次分享，你和好友都再+100亿币</p>
            <p>3、分享信息越多，好友分享越多，得亿币越多</p>
            <span class="font-small s-tip"><span class="black-weight"> 温馨提示</span>：此条信息限本地用户分享可得亿币</span>
        </div>
        <div v-if="recommendList && recommendList.length > 0">
            <div class="zhu-title">
                <p class="font-big-normal z-txt">猜你喜欢</p>
                <!-- <p class="font-small z-more">查看更多 ></p> -->
            </div>
            <div class="news-list">
                <j-news-list :recommendList="recommendList"></j-news-list>
            </div>
        </div>
        <iframe src="https://m.ctrip.com/html5/?allianceid=896595&sid=1467766&ouid=&app=0101f00" style="height:225vh;width:100vw" frameborder="0"></iframe>
        <div style="border-top:1px solid #eee;">
            <van-tabs v-model="active" @click="onTabClick">
                <van-tab title="热门评论"></van-tab>
                <van-tab title="最新评论"></van-tab>
            </van-tabs>
        </div>
        <p style="line-height: 2rem; font-size: 14px; color: #999; text-align: center;" v-if="appnologin">登陆后可查看</p>
        <div :class="{'isweb-bottom':!isapp}" v-if="!appnologin">
            <van-list
                v-model="commentFy.loading"
                :finished="commentFy.finished"
                @load="onCommentFyLoad">
                <j-comment-list :list="commentList" :ishot="ishot" @getCommentList="fetchCommentList" v-if="commentList.length"></j-comment-list>
                <p style="line-height: 2rem; font-size: 14px; color: #999; text-align: center;" v-else>暂无评论</p>
            </van-list>
        </div>
        <div class="fixed-botton-btn" v-if="!isapp">
            <div class="item-btn">
                <p class="iconfont icon-dianzan font-big-small" :class="{'font-red':isartzan}" @click="artZan"><span style="color:#333;"> {{info.zans}}</span></p>
            </div>
            <div class="item-btn">
                <p class="iconfont icon-comment font-big-small" @click="showinputFn"> {{info.comment_num || 0}}</p>
            </div>
            <div class="item-btn">
                <p class="iconfont icon-fenxiang font-big-small" @click="toShare=true"> 分享</p>
            </div>
            <div class="item-btn">
                <p class="iconfont icon-icon-test font-big-small" @click="callphone"> 电话</p>
            </div>
        </div>
        <div>
            <j-comment-input id="inputcomDiv" style="display:none" @bindClose="hideinputFn" @bindSendMsg="bindSendMsg"></j-comment-input>
            <!-- <input type="text" style="position: fixed;
                    bottom: 0px;
                    left: 0px;
                    right: 0px;
                    width: 100%;
                    z-index: 999;
                    height: 50px;
                    border-top: 1px solid #f5f5f5;display:none;" id="input"> -->
        </div>
        <div class="share-arrow" v-if="toShare">
            <img src="../../assets/share_arrow.png" alt="" @click="toShare=false">
        </div>
    </div>
</template>

<script>
    import jheader from "components/Header"
    import jNewsContent from "components/NewsContent"
    import jNewsList from "components/NewsContent/NewsList"
    import jCommentList from "components/NewsContent/CommentList"
    import jCommentInput from "components/NewsContent/CommentInput"
    import * as globalConfig from 'utils/globalConfig'
    import * as auth from 'utils/auth'
    import wx from 'weixin-js-sdk'
    import * as typeUtils from 'utils/typeUtils' 
    function a() {
        let arr = []
        for(let a=1;a<17;a++){
            arr.push(a)
        }
        return arr
    }
    export default {
        components: {
            jheader,
            jNewsContent,
            jNewsList,
            jCommentList,
            jCommentInput
        },
        directives: {

        },
        data () {
            return {
                numimg: a(),
                active: 0,
                detialId: '6939',
                fromType: '',
                unionid: '',
                info_id: '',
                info_type: '',
                info_member_id: '',
                phoneNum: '',
                toShare: false,
                isartzan:false,
                info: {},
                infoObj:{},
                userinfo:{
                    member_img:'',
                    adver_membername: '',
                    adver_time: '',
                    top: '',
                    class_name: '',
                    pro_name: ''
                },
                content: {
                    share_span:'',
                    adver_content: '',
                    adver_img: [],
                    video_content:'',
                    video_thumb:'',
                    link_content: '',
                    link_text: '',
                    link_img: '',
                    share_info_browse_count: '',
                    sharelogs_count: '',
                    sharelogs_data: [],
                    sharelogs_more_url: ''
                },
                commentList: [],
                ishot: true,
                recommendList: [],
                commentFy: {
                    loading: false,
                    finished: false,
                    page: 1,
                    first: 0
                },
                shareInfo: {
                    img:'',
                    title:'',
                },
                isapp: false,
                appnologin: false
            }
        },
        created() {
            },
        mounted () {
            // 设置html title
            document.title = sessionStorage.getItem('title')
            if(!this.$route.params.id || !this.$route.params.fromType) return
            this.detialId = this.$route.params.id
            this.fromType = this.$route.params.fromType
            this.isapp = eval(localStorage.getItem('isapp'))
            if(this.isapp) {
                if(localStorage.getItem('authapp')) {
                    this.unionid = JSON.parse(localStorage.getItem('authapp')).weixin_yjsb_unionid
                    sessionStorage.setItem('unionid',this.unionid)
                    this.appnologin = false
                }else {
                    this.appnologin = true
                }
            }else {
                this.unionid = JSON.parse(localStorage.getItem('auth')).weixin_yjsb_unionid
                sessionStorage.setItem('unionid',this.unionid)
            }

            this.setShare()

            this.getInfoDetail()
            // this.initWxShare()

            // this.getXc()

        },
        methods: {
            getXc() {
                this.$fetch(`${xmconfig.XC_URL}`,{}).then((res) => {})
            },
            // 有关分享的接口
            setShare() {
                if(!localStorage.getItem('auth')) return
                let info_type = this.fromType === globalConfig.detailType.local ? '4' :this.fromType === globalConfig.detailType.advert ? '1' : '3'
                this.$fetch(`${xmconfig.API_NC}/index.php`,{act:'shareinfo', op:'index',info_id:this.detialId, info_type:info_type, key:JSON.parse(localStorage.getItem('auth')).key, smid:sessionStorage.getItem('smid')}).then(res => {

                })
            },
            getInfoDetail() {
                if(this.fromType === globalConfig.detailType.local) { // 本地信息
                    // 信息详情
                    this.$fetch(`${xmconfig.API_NC}/index.php`,{act:'local_general',op:'general_detail',id:this.detialId, unionid:this.unionid}).then((res) => {
                        let obj = res.datas
                        obj.adver_membername = res.datas.member_name
                        obj.adver_time = res.datas.addtime
                        // obj.adver_content = res.datas.content
                        obj.adver_img = res.datas.img
                        this.info = obj
                        // 供分享使用的图片和文字
                        let adr = res.datas.areax ? res.datas.areax : res.datas.areac ? res.datas.areac : res.datas.areap ? res.datas.areap : '亿家世宝'
                        this.shareInfo.title = `${adr}信息平台【${res.datas.class_name || ''}】`
                        this.shareInfo.img = res.datas.img[0] || res.datas.share_img
                        // let img  = res.datas.img[0].split('://')[1]
                        // this.shareInfo.img = `http://${img}`
                        this.initWxShare()

                        this.isartzan = res.datas.is_zan === 1 ? true : false
                        // 存储信息属性 id type member_id phone
                        let infoObj = {
                            info_id: res.datas.id,
                            info_type: '4',
                            info_member_id: res.datas.member_id,
                            phone_num: res.datas.relation_phone,
                            unionid: this.unionid
                        }
                        sessionStorage.setItem('infoObj',JSON.stringify(infoObj))
                        this.infoObj = infoObj
                        // 获取评论列表
                        this.fetchCommentList()
                    })
                    // 推荐信息列表
                    this.$fetch(`${xmconfig.API_NC}/index.php`,{act:'recommend',op:'local_general',id:this.detialId}).then((res) => {
                        let arr = []
                        if(res.datas.length > 2) {
                            for(let i=0;i<2;i++) {
                                arr.push(res.datas[i])
                            }
                        }else {
                            arr = res.datas
                        }
                        this.recommendList  = arr.map(item => {
                            let obj = item
                            obj.adver_img = item.img[0]
                            obj.adver_content = item.content
                            return obj
                        })
                    })
                }else if(this.fromType === globalConfig.detailType.advert) { // 一元广告
                    // 信息详情
                    this.$fetch(`${xmconfig.API_NC}/index.php`,{act:'unitary_advert',op:'adver_detail',id:this.detialId, unionid:this.unionid}).then((res) => {
                        this.info = res.datas

                        // 供分享使用的图片和文字
                        let adr = res.datas.adver_areax ? res.datas.adver_areax : res.datas.adver_areac ? res.datas.adver_areac : res.datas.adver_areap ? res.datas.adver_areap : '亿家世宝'
                        this.shareInfo.title = `${adr}信息平台【${res.datas.class_name || ''}】`
                        this.shareInfo.img = res.datas.adver_img[0] || res.datas.share_img
                        // let img  = res.datas.adver_img[0].split('://')[1]
                        // this.shareInfo.img = `http://${img}`
                        this.initWxShare()

                        this.isartzan = res.datas.is_zan === 1 ? true : false
                        // 存储信息属性 id type member_id phone
                        let infoObj = {
                            info_id: res.datas.id,
                            info_type: '1',
                            info_member_id: res.datas.adver_memberid,
                            phone_num: res.datas.adver_mobile,
                            unionid: this.unionid
                        }
                        sessionStorage.setItem('infoObj',JSON.stringify(infoObj))
                        this.infoObj = infoObj
                        // 获取评论列表
                        this.fetchCommentList()
                    })
                    // 推荐信息列表
                    this.$fetch(`${xmconfig.API_NC}/index.php`,{act:'recommend',op:'unitary_advert',id:this.detialId}).then((res) => {
                        let arr = []
                        if(res.datas.length > 2) {
                            for(let i=0;i<2;i++) {
                                arr.push(res.datas[i])
                            }
                        }else {
                            arr = res.datas
                        }
                        this.recommendList = arr.map(item => {
                            let obj = item
                            obj.adver_img = item.adver_img[0]
                            return obj
                        })
                    })
                }else if(this.fromType === globalConfig.detailType.secondHand) { // 二手车
                    // 信息详情
                    this.$fetch(`${xmconfig.API_NC}/index.php`,{act:'second_hand',op:'detail',id:this.detialId, unionid:this.unionid}).then((res) => {
                        let obj = res.datas
                        obj.adver_membername = res.datas.member_name
                        obj.adver_time = res.datas.addtime
                        // obj.adver_content = res.datas.content
                        obj.adver_img = res.datas.img
                        this.info = obj

                        // 供分享使用的图片和文字
                        let adr = res.datas.areax ? res.datas.areax : res.datas.areac ? res.datas.areac : res.datas.areap ? res.datas.areap : '亿家世宝'
                        this.shareInfo.title = `${adr}信息平台【${res.datas.class_name || ''}】`
                        this.shareInfo.img = res.datas.img[0] || res.datas.share_img
                        // 测试环境分享图片是http://开头
                        // let img  = res.datas.img[0].split('://')[1]
                        // this.shareInfo.img = `http://${img}`
                        this.initWxShare()

                        this.isartzan = res.datas.is_zan === 1 ? true : false

                        // 存储信息属性 id type member_id phone
                        let infoObj = {
                            info_id: res.datas.id,
                            info_type: '3',
                            info_member_id: res.datas.member_id,
                            phone_num: res.datas.relation_phone,
                            unionid: this.unionid
                        }
                        sessionStorage.setItem('infoObj',JSON.stringify(infoObj))
                        this.infoObj = infoObj
                        // 获取评论
                        this.fetchCommentList()
                    })
                    // 推荐信息列表
                    this.$fetch(`${xmconfig.API_NC}/index.php`,{act:'recommend',op:'second_hand',id:this.detialId}).then((res) => {
                        let arr = []
                        if(res.datas.length > 2) {
                            for(let i=0;i<2;i++) {
                                arr.push(res.datas[i])
                            }
                        }else {
                            arr = res.datas
                        }
                        this.recommendList  = arr.map(item => {
                            let obj = item
                            obj.adver_img = item.img[0]
                            obj.adver_content = item.content
                            return obj
                        })
                    })
                }
            },
            onTabClick(index, title) {
                if(index === 1) {
                    this.ishot = false
                }else {
                    this.ishot = true
                }
                this.initCommentData()
                this.fetchCommentList()
            },
            initCommentData() {
                this.commentFy.page = 1
                this.commentFy.finished = false
                this.commentList = []
                this.commentFy.first = 0
            },
            // 获取评论列表
            fetchCommentList(a=0) {
                if(!this.unionid) return
                if(a === 1) this.initCommentData()
                if(this.ishot) {
                    xmview.getKey(`detail-hot-comment/${this.detialId}?infotype=${this.infoObj.info_type}&page=${this.commentFy.page}`,this.unionid).then(key => {
                        this.$fetch(`${xmconfig.API_YI}/v1/detail-hot-comment/${this.detialId}`,{infotype:this.infoObj.info_type, page:this.commentFy.page, unionid:this.unionid,key:key}).then(res => {
                            this.commentList = this.commentList.concat(res.datas)
                            this.commentFy.loading = false
                            if(!res.datas.length){
                                this.commentFy.finished = true
                            }
                        })
                    })
                }else {
                    xmview.getKey(`detail-comment/${this.detialId}?infotype=${this.infoObj.info_type}&page=${this.commentFy.page}`,this.unionid).then(key => {
                        this.$fetch(`${xmconfig.API_YI}/v1/detail-comment/${this.detialId}`,{infotype:this.infoObj.info_type, page:this.commentFy.page, unionid:this.unionid,key:key}).then(res => {
                            this.commentList = this.commentList.concat(res.datas)
                            this.commentFy.loading = false
                            if(!res.datas.length){
                                this.commentFy.finished = true
                            }
                        })
                    })
                }
            },
            // 评论的上拉加载
            onCommentFyLoad() {
                this.commentFy.first++
                console.log(this.commentFy.first)
                if(this.commentFy.first <= 1) return 
                this.commentFy.page++
                setTimeout(() => {
                    this.fetchCommentList()
                },500)
            },
            getPageScroll() {
                  return document.documentElement.scrollTop;
            },
            // 去显示input层 并自动获取焦点
            showinputFn() {
                // if(this.getPageScroll() < 400) {
                //     document.documentElement.scrollTop = 400
                // }
                typeUtils.stop()
                const inputdiv = document.getElementById('inputcomDiv')
                const input = document.querySelector('#input')
                inputdiv.style.display = 'block'
                input.focus()
            },
            hideinputFn() {
                typeUtils.move()
                const inputdiv = document.getElementById('inputcomDiv')
                inputdiv.style.display = 'none'
            },
            bindSendMsg(msg) {
                // xmview.showToast(msg)
                if(!msg) {
                    xmview.showToast('请输入评论')
                    return
                }
                xmview.getKey('detail-comment', this.unionid).then(key => {
                    let params = {
                        info_id: this.infoObj.info_id,
                        info_type: this.infoObj.info_type,
                        info_member_id: this.infoObj.info_member_id,
                        content: msg
                    }
                    this.$post(`${xmconfig.API_YI}/v1/detail-comment?unionid=${this.unionid}&key=${key}`,params).then(res => {
                        this.hideinputFn()
                        this.info.comment_num++
                        this.initCommentData()
                        this.fetchCommentList()
                    })
                })
            },
            artZan() {
                // this.isartzan = !this.isartzan
                if(this.isartzan) {
                    // 已赞 去取消
                    xmview.getKey('info-cancel-zan', this.unionid).then(key => {
                        let params = {
                            info_id: this.infoObj.info_id,
                            info_type: this.infoObj.info_type,
                        }
                        this.$post(`${xmconfig.API_YI}/v1/info-cancel-zan?unionid=${this.unionid}&key=${key}`,params).then(res => {
                            this.getInfoDetail()
                        })
                    })
                }else {
                    // 没赞 去赞
                    xmview.getKey('info-zan', this.unionid).then(key => {
                        let params = {
                            info_id: this.infoObj.info_id,
                            info_type: this.infoObj.info_type,
                        }
                        this.$post(`${xmconfig.API_YI}/v1/info-zan?unionid=${this.unionid}&key=${key}`,params).then(res => {
                            this.getInfoDetail()
                        })
                    })
                }
            },
            callphone(){ 
                window.location.href =`tel:${this.infoObj.phone_num}`;
            },
            txmore(url) {
                if(eval(localStorage.getItem('isapp'))){
                    window.location.href = 'readmore'
                }else {
                    window.location.href = url
                }
            },
            initWxShare() {
                if(this.isapp) return
                let url = window.location.href.split('#')[0]
                // alert(url)
                // alert(`link:${window.location.href.split('#')[0]}&member_id=${JSON.parse(localStorage.getItem('auth')).member_id}&agent_id=${JSON.parse(localStorage.getItem('auth')).agent_id}`)
                this.$fetch(`${xmconfig.API_NC}/index.php`,{act: 'setting_new',op: 'get_sign_package', url: url}).then(res => {
                    // alert(res.datas.appId+'+'+res.datas.timestamp+"+"+res.datas.nonceStr+"+"+res.datas.signature)
                    //wx是引入的微信sdk
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: res.datas.appId, // 必填，公众号的唯一标识
                        timestamp: res.datas.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.datas.nonceStr, // 必填，生成签名的随机串
                        signature: res.datas.signature,// 必填，签名
                        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
                    });
                    let _this = this
                    if(url.indexOf('&smid') != -1) {
                        url = url.split('&smid')[0]
                    }
                    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                        // 朋友
                        wx.onMenuShareAppMessage({
                            title: _this.shareInfo.title, // 分享标题
                            desc: _this.info.content_share, // 分享描述
                            link: `${url}&smid=${JSON.parse(localStorage.getItem('auth')).member_id}&agent_id=${JSON.parse(localStorage.getItem('auth')).agent_id}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: _this.shareInfo.img, // 分享图标
                            type: '', // 分享类型,music、video或link，不填默认为link
                            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                            success: function () {
                            // 用户点击了分享后执行的回调函数
                            }
                        });
                        // 朋友圈
                        wx.onMenuShareTimeline({
                            title: _this.shareInfo.title + _this.info.content_share, // 分享标题
                            link: `${url}&smid=${JSON.parse(localStorage.getItem('auth')).member_id}&agent_id=${JSON.parse(localStorage.getItem('auth')).agent_id}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: _this.shareInfo.img, // 分享图标
                            success: function () {
                                // 用户点击了分享后执行的回调函数

                            },
                        })
                    });
                })
                

            }
        }
    }
</script>

